// 右下柱状图

const WxyBar = {
    template: '#wxyBar',
    props: ['currenType', 'cityName'],
    data() {
        return {

        }
    },
    mounted() {
        this.setBar()
    },
    methods: {
        setBar() {
            service.get('/mock.json', {
                params: {
                    // 参数类型
                    type: this.currenType,
                    cityName: this.cityName
                }
            }).then(res => {
                // let { data } = res
                this.bar = echarts.init(document.getElementById('bar'));
                this.option = allEchartsOption.bar
                let legendData = []
                let xData = ["城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1", "城市1",
                    "城市1", "城市1", "城市1"
                ]
                let myData = [
                    {
                        name: '一级重大危险源',
                        data: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32]
                    }, {
                        name: '二级重大危险源',
                        data: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 334, 390, 330, 320, 320, 302, 301, 334, 390, 330, 32]
                    }, {
                        name: '一级重大危险源企业',
                        data: [320, 302, 301, 334, 390, 330, Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 301, 334, 390, 330, 32]
                    }, {
                        name: '二级重大危险源企业',
                        data: [320, 302, 301, 334, 390, Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), 302, 301, 334, 390, 330, 32]
                    }
                ]
                let serData = myData.map(item => {
                    legendData.push(item.name)
                    return ({
                        name: item.name,
                        type: "bar",
                        itemStyle: {
                            barBorderRadius: 2
                        },
                        data: item.data

                    })
                })
                this.option.legend.data = legendData
                this.option.xAxis.data = xData
                this.option.series = serData
                this.bar.setOption(this.option);
            })


        }
    },
    watch: {
        currenType(newValue, oldValue) {
            // 类型改变后一系列动作
            this.setBar()
        },
        cityName(newValue, oldValue) {
            // 城市改变后一系列动作
            this.setBar()
        }
    }
}